<template>
  <div class="list-page-b">
    <div class="list-page">
      <div class="list-search">
        <div class="singe-search">
          <el-select
            v-model="searchForm.deptId"
            ref="departmentId"
            clearable
            :filterable="true"
            :size="size"
            placeholder="请选择所在部门">
            <el-option
              v-for="item in informationList"
              :key="item.id"
              :label="item.deptName"
              :value="item.id">
            </el-option>
          </el-select>

        </div>
        <div class="singe-search">
          <el-input v-model="searchForm.account" clearable :size="size" placeholder="请输入所有人姓名/账号"></el-input>
        </div>
        <div class="singe-search-btn">
          <el-button  class="singe-search-btn1" icon="icon-my-search" :size="size" @click="getList(1)">搜索</el-button>
          <el-button icon="icon-my-reset" :size="size" @click="resetForm">重置</el-button>
        </div>
        <div class="singe-btn">
          <el-button type="primary" :size="size" icon="el-icon-plus" @click="add" style="margin-right: 0;">新增账号</el-button>
        </div>
      </div>
      <div class="table-main">
        <el-table :data="tableData" style="width: 100%" :height="tableHeight">
          <el-table-column type="index" label="序号" width="70" align="left"></el-table-column>
          <el-table-column
            prop="account"
            label="账号"
            min-width="120"
            align="center">
          </el-table-column>
          <el-table-column
            prop="deptName"
            label="所属部门"
            min-width="140"
            align="left">
          </el-table-column>
          <el-table-column
            prop="realName"
            min-width="140"
            label="所有人姓名"
            align="left">
          </el-table-column>
          <el-table-column
            prop="roleName"
            min-width="140"
            label="所属角色"
            align="left">
          </el-table-column>
          <el-table-column
            prop="createTime"
            min-width="180"
            label="创建时间"
            align="left">
          </el-table-column>
          <el-table-column label="操作" width="180" align="center" class="operation">
            <template slot-scope="scope" >
              <el-button type="text" :size="size" @click="updatePwd(scope.row)">重置密码</el-button>
              <el-button type="text" :size="size" @click="update(scope.row)">编辑</el-button>
              <el-button type="text" :size="size" @click="rowDelete(scope.row)" style="color:#FF4329;">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageForm.pageNum"
            :page-sizes="[20, 50, 100]"
            :page-size="pageForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total">
          </el-pagination>
        </div>
      </div>
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" class="form-dialog" append-to-body
                 :close-on-click-modal="false">
        <div class="modalBody body-have-footer" v-if="dialogVisible">
          <el-form ref="DialogForm" :model="dialogForm" :rules="rules" label-position="top">
            <div v-if="accountVisible">
            <el-form-item label="账号(初始的密码与账号相同)" prop="account">
              <el-input v-model="dialogForm.account" :maxlength="15"  placeholder="请输入账号" :disabled="edit"></el-input>
            </el-form-item>
              <el-form-item label="所属部门" prop="deptName">
                <el-select
                  v-model="dialogForm.deptId"
                  clearable
                  custom-class="center-dialog"
                  ref="deptId"
                  @change="change"
                  placeholder="请选择所在部门">
                  <el-option
                    v-for="item in informationList"
                    :key="item.id"
                    :label="item.deptName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所有人姓名" prop="realName">
                <el-input v-model="dialogForm.realName" :maxlength="10"  placeholder="请输入所有人姓名"></el-input>
              </el-form-item>
              <el-form-item label="所属角色" prop="roleId">
                <el-select
                  v-model="dialogForm.roleId"
                  clearable
                  custom-class="center-dialog"
                  placeholder="请选择角色">
                  <el-option
                    v-for="item in roleList"
                    :key="item.id"
                    :label="item.roleName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>

<!--            <div v-if="pwdVisible">-->
<!--              <el-form-item label="新密码" prop="password">-->
<!--                <el-input v-model="dialogForm.password" placeholder="请输入密码"></el-input>-->
<!--              </el-form-item>-->
<!--            </div>-->
          </el-form>
        </div>
        <div style="clear: both"></div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitDialog('DialogForm')" icon="el-icon-circle-plus-outline" size="small">
            确 定
          </el-button>
          <el-button @click="dialogVisible=false" icon="el-icon-circle-close" size="small">
            取 消
          </el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {selectDepartment} from '../../../api/famfrontend/masterData/masterData'
import {getList as roleList} from '../../../api/system/role'
import {getList,remove,submit,update,updatePassword} from '../../../api/famfrontend/accountManagement/accountManagement';
export default {
  data(){
    return{
      edit:false,
      size:"small",
      dialogTitle:"",
      searchForm:{
        deptId:'',
        account:'',
      },
      dialogVisible:false,
      accountVisible:true,
      pwdVisible:false,
      pageForm:{
        pageNum:1,
        pageSize:20,
        total:0,
      },
      tableData:[],
      informationList:[],
      dialogForm:{
        id:'',
        account:'',
        deptId:'',
        deptName:'',
        password:'',
        realName:'',
        roleId:'',
      },
      // 角色下拉框
      roleList:[],
      rules:{
        account:[{required: true, message: '请补充账号', trigger: 'blur'}],
        deptName:[{required: true, message: '请补充所属部门', trigger: 'change'}],
        realName:[{required: true, message: '请补充所有人姓名', trigger: 'blur'}],
        // password:[{required: true, message: '请补充密码', trigger: 'blur'},
        //   {min:4,max:16,message: '密码长度需要在4-16位',trigger: 'blur'}],
        roleId:[{required: true, message: '请补充角色', trigger: 'blur'}]
      },
    }
  },
  created() {
    this.getList(this.pageForm.pageNum)
    // 获取角色
    selectDepartment().then(res => {
      this.informationList= res.data.data;
      this.informationList.unshift({
        deptName:'全部',id:-1
      })
    })
    // 获取角色
    roleList().then(res => {
      this.roleList= res.data.data;
      // this.informationList.unshift({
      //   deptName:'全部',id:-1
      // })
    })
  },
  computed:{
    tableHeight(){
      let h=document.body.clientHeight-265;
      return h;
    },
  },
  methods:{
    //分页
    getList(pageNum){
      const params ={
        account:this.searchForm.account,
        deptId:this.searchForm.deptId,
      }
      getList(pageNum,this.pageForm.pageSize,params).then(res => {
        this.tableData = res.data.data.records
        this.pageForm.total= res.data.data.total
        this.pageForm.pageNum=pageNum
        this.pageForm.pageSize=res.data.data.size
      })
    },
    //清空
    resetForm(){
      this.pageForm.pageNum=1
      this.searchForm.account = '';
      this.searchForm.deptId = '';
      this.getList(this.pageForm.pageNum)
    },
    //提交新增信息
    submit(){
      const params ={
        id:this.dialogForm.id,
        deptId:this.dialogForm.deptId,
        deptName:this.dialogForm.deptName,
        account:this.dialogForm.account,
        realName:this.dialogForm.realName,
        roleId:this.dialogForm.roleId,
        password:this.dialogForm.account
      }
      if (this.edit){
        if (this.accountVisible){
          update(params).then(res => {
            if (res.data.code == '200'){
              this.dialogVisible=false;
              if(this.dialogTitle=='重置密码'){
                this.$message.success('重置成功');
              }else{
                this.$message.success('编辑成功');
              }
              this.getList(this.pageForm.pageNum);
              this.dialogForm.roleId = ''
            }
          })
        }else{
          const par ={
            id:this.dialogForm.id,
            password:this.dialogForm.password,
          }
          updatePassword(par).then(res => {
            if (res.data.code == '200'){
              this.dialogVisible=false;
              this.$message.success('修改成功');
              this.getList(this.pageForm.pageNum);
              this.dialogForm.roleId = ''
            }
          })
        }
      }else{
        submit(params).then(res => {
          if (res.data.code == '200'){
            this.dialogVisible=false;
            this.$message.success('新增成功');
            this.getList(this.pageForm.pageNum);
            this.dialogForm.roleId = ''
          }
        })
      }
      this.dialogForm.roleId = ''
    },
    //新增
    add(){
      this.edit = false;
      this.dialogForm.id='';
      this.dialogForm.account='';
      this.dialogForm.deptId='';
      this.dialogForm.deptName='';
      this.dialogForm.realName='';
      this.dialogForm.password='';
      this.dialogForm.roleId = '';
      this.dialogTitle='添加账号';
      this.dialogVisible=true;
      this.accountVisible=true;
      this.pwdVisible=true;
      if (this.$refs.DialogForm){
        this.$refs.DialogForm.resetFields();
      }
    },
    //编辑
    update(row){
      this.edit = true;
      this.dialogTitle='编辑账号';
      this.dialogVisible=true;
      this.accountVisible=true;
      this.pwdVisible=false;
      this.dialogForm.id=row.id;
      this.dialogForm.account=row.account;
      this.dialogForm.deptId = row.deptId;
      if(row.deptId == -1){
        this.dialogForm.deptId = -1
        this.dialogForm.deptName = '全部'
      }
      this.dialogForm.deptName=row.deptName;
      this.dialogForm.realName=row.realName;
      this.dialogForm.roleName = row.roleName;
      this.dialogForm.roleId = row.roleId;
      this.dialogForm.password='';
    },
    updatePwd(row){
      this.$confirm('是否确认重置密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.edit = true;
        this.dialogTitle = '重置密码';
        this.dialogForm.id = row.id;
        this.dialogForm.password = row.account;
        this.dialogForm.account = row.account;
        this.dialogForm.deptId = row.deptId;
        if (row.deptId == -1) {
          this.dialogForm.deptId = -1
          this.dialogForm.deptName = '全部'
        }
        this.dialogForm.deptName = row.deptName;
        this.dialogForm.realName = row.realName;
        this.dialogForm.roleName = row.roleName;
        this.dialogForm.roleId = row.roleId;
        this.submit();
      }).catch(() => {
      });
    },
    submitDialog(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogVisible=false;
          this.submit();
        }
      });
    },
    //删除
    rowDelete(row){
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove(row.id).then(() =>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getList(this.pageForm.pageNum)
        })
      }).catch(() => {
      });
    },
    change(val){
      this.dialogForm.deptId = val;
      this.informationList.forEach(item => {
        if (val == item.id){
          this.dialogForm.deptName = item.deptName;
        }
      });
    },
    handleSizeChange(val) {
      this.pageForm.pageSize = val
      this.getList(1)
    },
    handleCurrentChange(val) {
      this.pageForm.pageNum = val
      this.getList(val)
    }
  }
}
</script>

<style scoped lang="scss">
@import '../../../styles/page/list';
</style>
